<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        ul{
            width: 1000px;
            height: 900px;
            background-color: #9e9e9e;
            
        }
        ul li{
            list-style: none;
            float: left;
            width: 200px;
            height: 400px;
            margin-left: 20px;
            margin-top: 30px;
        }
        ul li img{
            width: 200px;
            height: 300px;
        }
        ul li span{
            display: block;
            height: 80px;
            overflow: hidden;
        }
        ul li b{
            width: 200px;
            display: block;
            color: red;
            text-align: center;
        }
    </style>
    <script src="./vue.js"></script>
</head>
<body>
    <ul id="app">
        <li v-for="(item,index) in mockData">
            <img :src="item.img" alt="">
            <span v-html="item.text"></span>
            
            <b>{{item.price}}</b>
        </li>
    </ul>
</body>
</html>
<script>
    let vm  = new Vue({
        el:"#app",
        data:{
            mockData: [
    {
      "id": 1,
      "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/164708/20/20875/95398/6086e7daE5d1ea589/2248e82326846870.jpg.webp",
      "text": "兰叶源  轻奢莫兰迪真绒布绢假塑料白玫瑰浆果花把束艺卉餐桌花瓶摆件 浅蓝色 两套更优惠",
      "price": 266
    },
    {
      "id": 2,
      "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/156232/40/12942/112817/6041ced3Ef7f383b3/7e29e51c25f7b77e.jpg.webp",
      "text": "<i class=\"more2_info_self\">自营</i>都市丽人文胸无钢圈聚拢中薄款蜂巢杯透气美背小花心波斯菊蕾丝胸罩内衣女2B9506 浅肤32/70A杯",
      "price": 98
    },
    {
      "id": 3,
      "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/176546/26/4766/230854/607aa012E97def171/7417547d2d2e5da3.jpg.webp",
      "text": "兰叶源  创意中式陶瓷仕女香插香座插香器线香室内檀香家用线香薰炉摆件 小宫娥 坐  哑光",
      "price": 166
    },
    {
      "id": 4,
      "img": "https://img12.360buyimg.com/jdcms/s300x300_jfs/t1/119997/6/15535/123334/5f8d237bE36364127/a4d5ee3e0209d2a0.jpg.webp",
      "text": "<i class=\"more2_info_chosen\"></i>得力（deli）4905 电脑椅 家用办公椅 转椅人体工学网布椅子 时尚升降座椅",
      "price": 459
    },
    {
      "id": 5,
      "img": "https://img11.360buyimg.com/jdcms/s300x300_jfs/t1/158542/28/20137/213892/607aa011Ef99cf77f/ee308525809e7d32.jpg.webp",
      "text": "兰叶源  创意简约现代手工陶瓷人物家居小摆件客厅办公室书房工艺品装饰品 小胖",
      "price": 96
    },
    {
      "id": 6,
      "img": "https://img14.360buyimg.com/jdcms/s300x300_jfs/t1/184019/38/1640/74927/608bce5aEcbe6dfa2/7649c02195797afa.jpg.webp",
      "text": "<i class=\"more2_info_self\">自营</i>浪琴(Longines)瑞士手表 嘉岚系列 石英钢带女表 L42091917",
      "price": 9800
    },
    {
      "id": 7,
      "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/161897/28/19295/153357/607aa1caEd6d31b06/470d5052656bbc5e.jpg.webp",
      "text": "兰叶源  木雕福猪摆件生肖猪一对客厅玄关电视柜家居装饰乔迁创意礼品 小号木福猪一只(长18厘米)",
      "price": 726
    },
    {
      "id": 8,
      "img": "https://img13.360buyimg.com/jdcms/s300x300_jfs/t1/149094/12/15569/191462/5fbcb4d4Eca6c430b/29df94b426525dd7.jpg.webp",
      "text": "木马人 鞋架子多层简易落地卧室客厅鞋柜宿舍实木小鞋凳门口防尘家用门后经济型换鞋凳楠竹收纳置物架 【全板密封】七层102长（加宽深度）",
      "price": 149
    }]

        }
    })
</script>